<!-- 列表 -->
<template>
  <div class="index">
    <div>
      <div class="container" id="container">
        <div class="main-box">
          <div class="banner-box">
            <div class="banner-content">
              <div class="title">信息简报</div>
              <div class="e-title">Briefing</div>
            </div>
          </div>
          <div class="content">
            <div class="breadcrumb-box">
              <span class="breadcrumb">
                <i class="el-icon-location-outline">位置：</i>
              </span>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>信息简报</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div>
          <div>
            <div class="block">
              <span class="demonstration">日期筛选：</span>

              <el-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                              unlink-panels :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
              <el-button type="primary" @click="selectTime()">查询</el-button>
              <el-button type="primary" @click="addBrie()" v-show="identity == 1">新增简报</el-button>

            </div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :page-sizes="[5, 10, 15, 20]" :page-size="100"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="bireListLength">
            </el-pagination>
            <div class="coantier">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="title" label="标题" width="180">
                </el-table-column>
                <el-table-column prop="createBy" label="创建人" width="180"></el-table-column>
                <el-table-column prop="createTime" label="时间">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button @click="getPdf(scope.row)" type="text" size="small">查看PDF</el-button>
                    <el-button @click="deleteById(scope.row)" type="text" size="small"
                               v-show="identity == 1">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 简报详情dialog -->
    <el-dialog title="详情" :visible.sync="brieVisible" width="60%">
      <div>
        <span>标题 ：{{ brieTitle }}</span>
        <el-divider> 内容<i class="el-icon-document"></i></el-divider>
        <span>{{ content }}</span>
        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        <span>时间 ： {{ createTime }}</span>
        <el-divider content-position="right">创建人 ：{{ createBy }}</el-divider>
      </div>
    </el-dialog>
    <!-- 修改简报详情dialog -->
    <el-dialog title="详情" :visible.sync="updateVisible" width="60%">
      <div>
        <span>标题 ：{{ brieTitle }}</span>
        <el-divider> 内容<i class="el-icon-document"></i></el-divider>

        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="content" autosize>
        </el-input>
        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        <span>时间 ： {{ createTime }}</span>
        <el-divider content-position="right">创建人 ：{{ createBy }}</el-divider>
        <el-button type="success" @click="conpdate()">确认修改</el-button>
      </div>
    </el-dialog>
    <!--简报dialog -->
    <el-dialog title="新增简报" :visible.sync="pdfVisible" width="60%">
      <el-upload
          class="upload-demo"
          ref="upload"
          action="/pdf/upload"
          :show-file-list="false"
          :before-upload="beforeUpload">
        <el-button slot="trigger" size="mini" type="danger">选取文件</el-button>
      </el-upload>
      <div style="margin-top: 10px">备注：仅限上传一个PDF文件</div>
      <div slot="footer" style="text-align: center;">
        <el-button size="mini" @click="viewfile">预览</el-button>
        <el-button size="mini" type="primary" @click="upLoadpdf()">上传</el-button>
        <el-button size="mini" @click="pdfVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pdf from 'vue-pdf';

components: {
  pdf
}
export default {
  created() {
    this.getBireList();
    this.user = JSON.parse(localStorage.getItem("user"))
    this.identity = JSON.parse(localStorage.getItem("user")).identity
  },
  data() {
    return {
      value: '',
      bireListLength: 0,
      tableData: [{}],
      current: 1,//当前页
      pageSize: 5,//每页显示条数
      dialogVisible: false,// 显示dialog
      brieVisible: false,
      updateVisible: false,
      pdfVisible: false,
      voice: {
        content: '',// 心声文本,
        title: '', // 心声标题
        createBy: '匿名' // 作者
      },
      brieTitle: '', // 简报标题
      createTime: '', // 创建时间
      content: '', //内容
      createBy: '', //作者
      time: {
        beginTime: '',
        endTime: ''
      },
      user: {
        identity:''
      },
      briefing: {},
      identity: '',
      isshowpdf: false,
      file: '',
      briefingPdf: {
        path: ''
      },
      unlinkPanels:false
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getBireList();
    },
    handleCurrentChange(val) {
      this.current = val
      this.getBireList();
    },
    // 简报分页
    getBireList() {
      this.$axios.get("/briefingpdf/listPage", {
            params: {
              current: this.current,
              pageSize: this.pageSize,
              beginTime: this.time.beginTime,
              endTime: this.time.endTime
            }
          }
      ).then((res) => {
        console.log(res.data.data.records)
        this.tableData = res.data.data.records
        this.bireListLength = res.data.data.total
      });
    },
    // 查看简报
    handleClick(item) {
      this.brieVisible = true
      this.$axios.get("/briefing/getById", {
            params: {
              id: item.id
            }
          }
      ).then((res) => {
        this.content = res.data.data.content
        this.createTime = res.data.data.createTime
        this.brieTitle = res.data.data.title
        this.createBy = res.data.data.createBy
      });
    },
    // 时间格式化
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      var minute = date.getMinutes();
      minute = minute < 10 ? ('0' + minute) : minute;
      var second = date.getSeconds();
      second = second < 10 ? ('0' + second) : second;
      var time = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
      return time;
    },
    // 选择时间
    selectTime() {
      var timeArr = [];
      if (this.value == null) {
        this.time.beginTime = ''
        this.time.endTime = ''
        this.getBireList();
      } else {
        timeArr = this.value
        this.time.beginTime = this.timestampToTime(timeArr[0])
        this.time.endTime = this.timestampToTime(timeArr[1])
        console.log(this.time)
        this.getBireList();
      }

    },
    // 删除
    deleteById(item) {
      this.$axios.delete('/briefingpdf/delById', {
        params: {
          id: item.id
        }
      }).then(res => {
        this.getBireList()
      })
      this.$axios.get('/briefingpdf/getById', {
        params: {
          id: item.id
        }
      }).then(res => {
        console.log(res.data.data.path)
        this.deletepdf(res.data.data.path)
      })
    },
    // 删除 pdf
    deletepdf(item) {
      this.$axios.delete('/file/delete', {
        params: {
          fileInfo: item
        }
      }).then(res => {
        console.log(res.data.data.path)

      })
    },
    // 确认修改
    conpdate() {
      this.briefing.content = this.content
      console.log(this.briefing)
      this.$axios.put("/briefing/updateById", this.briefing
      ).then((res) => {
        if (res.data.code == 1) {
          this.$message.success("修改成功");
        }
      });
    },
    // 生成PDF
    pdf(item) {
      this.$axios.get("/briefing/getPDF", {
            params: {
              id: item.id
            }
          }
      ).then((res) => {
      });
    },
    addBrie() {
      this.pdfVisible = true
    },
    beforeUpload(file) {
      this.file = file;
      this.fileName = file.name;
      // console.log(file)
      this.briefingPdf.title = file.name
      // this.fileSize = file.size;
      const extension = file.name.split('.').slice(-1) == 'pdf'
      if (!extension) {
        this.$message.warning('上传模板只能是pdf格式!')
        return
      }
      let reader = new FileReader();
      reader.readAsDataURL(file);
      let that = this;
      reader.onload = function () {
        that.fileData = reader.result;
      };
      return false; // 返回false不会自动上传
    },
    //预览文件
    viewfile() {
      var win = window.open();
      win.document.write(
          '<body style="margin:0px;"><object data="' +
          this.fileData +
          '" type="application/pdf" width="100%" height="100%"><iframe src="' +
          this.fileData +
          '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
      )
    },
    // 上传pdf文件
    upLoadpdf() {
      if (this.file == '') {
        this.$message.warning('请选择要上传的文件！');
        return false
      }
      let fileFormData = new FormData();
      fileFormData.append("file", this.file);
      this.$axios.post('/file/upload', fileFormData).then(res => {
        this.briefingPdf.createBy = this.user.username
        if (res.data.code == 1) {
          this.briefingPdf.path = res.data.data
          this.savePath()
        }
        this.pdfVisible = false
        this.getBireList();
      })
    },
    // 保存路径
    savePath() {
      this.$axios.post('/briefingpdf/save', this.briefingPdf).then(res => {
        if (res.data.code == 1) {
          this.$message.warning("上传成功！");
          this.getBireList()
        }
      })
    },
    getPdf(item) {
      this.$axios.get('/briefingpdf/getById', {
        params: {
          id: item.id
        }
      }).then(res => {
        console.log(res.data.data.path)
        this.showPdf(res.data.data.path)
      })
    },
    showPdf(path) {
      this.$axios.get('/file/get', {
        responseType: "blob", // blob 文件流解码
        params: {
          fileName: path
        }
      }).then(res => {
        //res为接口所返回的文件流
        console.log(res.data)
        var blob = new Blob([res.data], {
          type: "application/pdf;chartset=UTF-8"
        });
        // var url = window.URL.createObjectURL(blob);
        //新窗口打开
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.target = "_blank";
        link.click();
      })
    },
  },
  // 日期变化
  watch: {
    value() {
    }
  }
}
</script>

<style scoped lang="scss">
.banner-box {
  width: 100%;
  height: 330px;
  background: url("../assets/images/banner.png");

  .banner-content {
    width: 1200px;
    margin: 0 auto;
    padding-top: 90px;
  }

  .title {
    font-size: 40px;
    color: white;
  }

  .e-title {
    font-size: 14px;
    color: white;
  }
}

.main-box {
  background: white;
}

.content {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .breadcrumb {
    font-size: 14px;
    font-weight: 700;
    color: #4e4e4e;
  }

  .breadcrumb-box {
    display: flex;
    align-items: center;
    margin: 25px 0;
  }
}

.news-box {
  width: 1200px;
  margin: 0px auto;
  height: calc(100% - 495px);
  // min-height: 460px;
  cursor: pointer;

  .circle {
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: #2373d5;
    margin-top: 10px;
  }

  .news-item {
    display: grid;
    grid-template-columns: 2% 63% 20% 15%;
    line-height: 24px;
    padding: 5px 0;
    font-size: 14px;
    border-bottom: 1px dashed #ccc;

    &:hover {
      color: #2373d5;
    }

    .news-title {
      text-overflow: ellipsis;
      /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
      white-space: nowrap;
      /*让文字不换行*/
      overflow: hidden;
      /*超出要隐藏*/
    }
  }
}

.pagination {
  text-align: center;
  padding-top: 20px;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
  line-height: 22px;
}

.operation {
  display: flex;
}

.footer {
  width: 100%;
  height: 47px;
  background: #585c60;
  text-align: center;
  margin-top: 17px;
  line-height: 47px;
  font-size: 14px;
  color: white;

  z-index: 9;
  position: fixed;
  bottom: 0;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.button {
  margin-left: 200px;
}
</style>
